<template>
    <div id="zonghe">
        <ul>
            <li v-for="(item,key) in goodsList" :key="key">
                <div class="outerbox">
                    <img :src="urlprocess(item.Cover)" alt="">
                    <p>{{item.Title|filter2lines}}</p>
                    <span>&yen;{{item.Price}}</span>
                    <span>总销量{{item.TotalQty}}件</span>
                    <hr>
                    <div>
                        <span>{{item.DisplayStatu.substr(0,1)}}</span>
                        <span>已拼{{item.DealCount}}件，我也要拼</span>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            listcontent: []
        }
    },
    props:{
        goodsList:{
            type:Array
        }
    },
    methods:{
        urlprocess(originurl){
            var firststep=originurl.replace("://",".b0.upaiyun.com//");
            var secondstep=firststep.replace("upyun:","http://");
            return secondstep;
        }
    },
    filters:{
        filter2lines(value){
            return value.substr(0,25);
        }
    }
}
</script>
<style lang="scss" scoped>
    #zonghe{
        padding: 42.5px 2.5px 2.5px;
        width:100%;
        height:100%;
        background: white;
        ul{
            width:100%;
            height:100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            li{
                width: 50%;
                height:320px;
                box-sizing: border-box;
                padding:5px;
                .outerbox{
                    width:100%;
                    height: 200px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                    p{
                        margin: 0;
                    }
                    span:nth-child(3){
                        font-size: 14px;
                        color: red;
                    }
                    span:nth-child(2),span:nth-child(4){
                        font-size: 12px;
                    }
                    hr{
                        height: 8px;
                        border: none;
                        margin: 0;
                        background:rgb(235, 122, 122);
                        border-radius: 4px;
                    }
                    span:nth-child(1){
                        font-size: 14px;
                        background:red;
                        color:white;
                    }
                }
            }
        }
    }
</style>
